import { useState, useEffect } from 'react'

// 它接受的参数是一个dom元素
export default function useScroll(scrollRef) {
  const [pos, setPos] = useState([0, 0])

  // 创建了一个useEffect,每次当监听的元素发生变化时，将变化的内容返回给调用者
  useEffect(() => {
    const { current } = scrollRef

    // 处理监听的方法，它会把当前滚动条的位置发送给react的setState方法
    function handleScroll() {
      setPos([current.scrollLeft, current.scrollTop])
    }

    // 事件绑定
    current.addEventListener('scroll', handleScroll, false)

    // 清除事件
    return () => {
      current.removeEventListener('scroll', handleScroll, false)
    }
    // 将scrollRef当成依赖，避免在ref.current为undefined时进行事件绑定
  }, [scrollRef])

  return pos
}
